<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vedio</title>
    <link href="http://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
</head>

<body>
    <video id="mvideo" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" data-setup="{}">
        <source src="http://static.qiakr.com/movie/0060201.mp4" type='video/mp4'>
        <p class="vjs-no-js">
            您的浏览器暂时不支持 HTML5 播放，请更换浏览器
            <a href="http://videojs.com/html5-video-support/" target="_blank">更换其他浏览器</a>
        </p>
    </video>


    <div class="actions">
        <a href="javascript:;" class="btnChangeVedio" data-src="http://static.qiakr.com/movie/0060201.mp4" data-poster="http://oega8z2v1.bkt.clouddn.com/item01.png">第1节</a>
        <a href="javascript:;" class="btnChangeVedio" data-src="http://static.qiakr.com/movie/0060202.mp4" data-poster="http://oega8z2v1.bkt.clouddn.com/item06.png">第2节</a>
        <a href="javascript:;" class="btnChangeVedio" data-src="http://static.qiakr.com/movie/0060203.mp4" data-poster="http://oega8z2v1.bkt.clouddn.com/item02.png">第3节</a>

        <select id="playRate" >
			<option value ="0.5">0.5 倍速</option>
		  	<option value ="0.75">0.75 倍速</option>
		  	<option value="1" selected="true" >1 倍速</option>
		  	<option value="1.5">1.5 倍速</option>
		  	<option value="1.75">1.75 倍速</option>
		  	<option value="2.0">2.0 倍速</option>
        </select>

        <input type="checkbox" name="autoNext" id="autoNext" checked="true">自动播放下一小节

    </div>

    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
    <script>
    	// 视频源
    	var vdoSources = ["http://static.qiakr.com/movie/0060201.mp4","http://static.qiakr.com/movie/0060202.mp4","http://static.qiakr.com/movie/0060203.mp4"];
    	// 当前播放的视频的索引
    	var currentPlayIdx  = 0;

        var playerConfig = {
            autoplay: false,    //自动播放
            preload: true,      //预加载
            poster: "http://oega8z2v1.bkt.clouddn.com/item01.png",   //视频缩略图
            loop: false,        //循环播放
        };

        // 创建一个 videojs 的 player 对象 
        var player = videojs('#mvideo', playerConfig);

        // 更换当前播放器播放的视频源
        var changePlayerSource = function(vdoSrc) {
        	console.log("vedioSrc change:", vdoSrc);
        	// 维护当前播放的视频索引
        	currentPlayIdx = vdoSources.indexOf(vdoSrc);
			player.src(vdoSrc);
            player.load();
            player.play();
        }

        // 监听播放器播放完成事件，根据用户选择是否播放下一小节
        player.on("ended", function(){
        	
        	var autoNextFlag = $("#autoNext").is(':checked');
        	
        	if( autoNextFlag && currentPlayIdx + 1 < vdoSources.length ){  // 用户希望自动播放下一节 并且 存在下一小节
        		var src = vdoSources[currentPlayIdx + 1];
        		changePlayerSource(src);
        	}
        });


        // 切换播放源为哪一个小节
        $(".btnChangeVedio").on("click", function () {
            var vedioSrc = $(this).attr("data-src");
            var vedioPoster = $(this).attr("data-poster");
            
            player.poster(vedioPoster);
            changePlayerSource(vedioSrc);
        });

        // 切换视频播放速度
        $("#playRate").on("change", function(even) {
        	var rate = parseFloat($(this).val());
        	console.log("vedioRate change:", rate);
        	player.defaultPlaybackRate(rate);
        	player.playbackRate(rate);

        })



    </script>
</body>

</html>